<script>
    import { HSplitPane, VSplitPane } from "$lib/splitpane";
    let string = `QcEdit Quiz Card Edit
    In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.
    `;
</script>

<div class="w-full h-full flex flex-col bg-gray-100">
    <textarea value={string} class="w-full overflow-scroll flex-grow" />
    <div class="w-full flex-grow-0">
        <HSplitPane
            leftPaneSize="50%"
            rightPaneSize="50%"
            minLeftPaneSize="5px"
            minRightPaneSize="5px"
        >
            <left slot="left">
                <div class="md:flex md:items-center my-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Anchor Line
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="number"
                            value="12"
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Cloze①
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            value="manually escape HTML"
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Cloze②
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            value="XSS attacks"
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Cloze③
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            placeholder="Up to 3 clozes"
                            value=""
                        />
                    </div>
                </div>
            </left>
            <right slot="right"> 


                <div class="md:flex md:items-center my-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                        Answer Options    
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            value=""
                            disabled
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Correct
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500 "
                            id="inline-full-name"
                            type="text"
                            value="①manually escape HTML, ②XSS attacks ③④⑤⑥"
                            readonly
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Wrong
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            value="①XSS attacks, ②XSS"
                        />
                    </div>
                </div>

                <div class="md:flex md:items-center mb-1 pr-4">
                    <div class="md:w-1/4">
                        <label
                            class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-2"
                            for="inline-full-name"
                        >
                            Wrong
                        </label>
                    </div>
                    <div class="md:w-3/4">
                        <input
                            class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                            id="inline-full-name"
                            type="text"
                            placeholder="Up to 3 cloze items"
                            value="①XSS , ②XSS HTML"
                        />
                    </div>
                </div>
            </right>
        </HSplitPane>
    </div>
</div>
